<template>
    <div class="JS_containerInfo">
        <Card class="card">
            <div id="personalCenter2-rightContainer">
                <div class="time-line">
                    <ul>
                        <li :class="{active:tmInfo.apply_date?tmInfo.apply_date.length > 0:false}">
                            <div class="time-line-content">
                                <p>商标申请</p>
                                <p class="time">{{tmInfo.apply_date}}</p>
                            </div>
                            <i class="circle">
                                <i class="circle-in"></i>
                            </i>
                        </li>
                        <li :class="{active:tmInfo.first_inspe_anno_date?tmInfo.first_inspe_anno_date.length > 0:false}">
                            <div class="time-line-content">
                                <p>初审公告</p>
                                <p class="time">{{tmInfo.first_inspe_anno_date}}</p>
                            </div>
                            <i class="circle">
                                <i class="circle-in"></i>
                            </i>
                        </li>
                        <li :class="{active:tmInfo.register_inspe_anno_date?tmInfo.register_inspe_anno_date.length > 0:false}">
                            <div class="time-line-content">
                                <p>已注册</p>
                                <p class="time">{{tmInfo.register_inspe_anno_date}}</p>
                            </div>
                            <i class="circle">
                                <i class="circle-in"></i>
                            </i>
                        </li>
                        <li :class="{active:isDate(tmInfo.spe_period_end_date)}">
                            <div class="time-line-content">
                                <p>终止</p>
                                <p class="time">{{tmInfo.spe_period_end_date}}</p>
                            </div>
                            <i class="circle">
                                <i class="circle-in"></i>
                            </i>
                        </li>
                    </ul>
                </div>
                <table class="brand-detail-table">
                    <tbody>
                    <tr>
                        <td class="td-title">商标名称</td>
                        <td class="td-content" colspan="3">{{tmInfo.trademark_name}}</td>
                    </tr>
                    <tr>
                        <td class="td-title">法律状态</td>
                        <td class="td-content"><strong>{{tmInfo.state_name}}</strong></td>
                        <td class="td-title">申请号</td>
                        <td class="td-content">{{tmInfo.register_number}}</td>
                    </tr>
                    <tr>
                        <td class="td-title">商品类别</td>
                        <td class="td-content">{{tmInfo.inter_type}}</td>
                        <td class="td-title">申请日期</td>
                        <td class="td-content">{{tmInfo.apply_date}}</td>
                    </tr>
                    <tr>
                        <td class="td-title">申请人名称</td>
                        <td class="td-content" colspan="3">
                            <a @click="pushInfo(tmInfo.register_people.register_people_chinese_name,3)" style="text-decoration: none"><i class="color">{{tmInfo.register_people?tmInfo.register_people.register_people_chinese_name:""}}</i></a>
                            <a class="iconfont icon-danchucengzhuanhuan"></a>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title">申请人地址</td>
                        <td class="td-content" colspan="3">{{tmInfo.register_people?tmInfo.register_people.register_address_chinese_name:""}}</td>
                    </tr>
                    <tr>
                        <td class="td-title">申请人名称（英文）</td>
                        <td class="td-content" colspan="3">{{tmInfo.register_people?tmInfo.register_people.register_people_english_name:""}}</td>
                    </tr>
                    <tr>
                        <td class="td-title">申请人地址（英文）</td>
                        <td class="td-content" colspan="3">{{tmInfo.register_people?tmInfo.register_people.register_address_english_name:""}}</td>
                    </tr>
                    <tr>
                        <td class="td-title">商标图片</td>
                        <td class="td-content">
                            <div class="brand-img">
                                <img :src="tmInfo.trademark_img" @error="$app.defImag" >
                            </div>
                        </td>
                        <td class="td-title">图片要素</td>
                        <td class="td-content">
                            <ul>
                                无
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title">商品/服务项目</td>
                        <td class="td-content" colspan="3">
                            <ul class="product-list">
                                <li class="list " v-for="(item,index) in tmInfo.goods_list" :key="index">{{item.fcgnum}}  {{item.good_name}}</li>
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td class="td-title">初审公告期号</td>
                        <td class="td-content">
                            {{tmInfo.first_inspe_anno_number}}
                            <a class="iconfont icon-danchucengzhuanhuan"></a>
                        </td>
                        <td class="td-title">初审公告日期</td>
                        <td class="td-content">{{tmInfo.first_inspe_anno_date}}</td>
                    </tr>
                    <tr>
                        <td class="td-title">注册公告期号</td>
                        <td class="td-content">{{tmInfo.register_inspe_anno_number}}</td>
                        <td class="td-title">注册公告日期</td>
                        <td class="td-content">{{tmInfo.register_inspe_anno_date}}</td>
                    </tr>
                    <tr>
                        <td class="td-title">专用权期限</td>
                        <td class="td-content">{{tmInfo.spe_period_begin_date}}至{{tmInfo.spe_period_end_date}}</td>
                        <td class="td-title">是否共有商标</td>
                        <td class="td-content">{{tmInfo.is_threedimen_trademark=='0'?'否':'是'}}</td>
                    </tr>
                    <tr>
                        <td class="td-title">后期指定日期</td>
                        <td class="td-content">{{tmInfo.international?tmInfo.international.later_designation_date:''}}</td>
                        <td class="td-title">国际注册日期</td>
                        <td class="td-content">{{tmInfo.international?tmInfo.international.inter_register_date:''}}</td>
                    </tr>
                    <tr>
                        <td class="td-title">优先权日期</td>
                        <td class="td-content">{{tmInfo.priority?tmInfo.priority.priority_date:''}}</td>
                        <td class="td-title">代理人名称</td>
                        <td class="td-content">
                            <a @click="pushInfo(tmInfo.agency_name,4)">{{tmInfo.agency_name}}</a>
                        </td>
                    </tr>
                    </tbody>
                </table>
                <div class="marginT10">*商标查询信息仅供参考，实际以国家商标局为准。</div>
            </div>
        </Card>
    </div>
</template>

<script>
    export default {
        name: 'TrademarkInfo',
        components: {},
        data () {
            return {
                tmInfo:{} // 详情
            }
        },
        methods:{
            // 申请人查询
            pushInfo(name,type) {
                $app.closeHadPage('Trademarklists', () => {
                    // 页面跳转
                    this.$router.replace({
                        name: 'Trademarklists',
                        query: {
                            query_key:name,
                            type
                        }
                    })
                })
            },
            // 判断时间
            isDate (time){
                let date = new Date(time).getTime();
                let date2 = new Date().getTime();
                return date <= date2;
            }
        },
        mounted () {
            const register_number = this.$route.query.p2 ;
            const inter_type = this.$route.query.p1;
            $ajax.lb_getTmInfo({inter_type,register_number},res => {
                this.tmInfo = res.data;
            })

        }
    }
</script>

